<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="num41" align="center" style="width: 400px;height: 400px;background-color: aliceblue;">
			<p>DIV1的一个非DIV元素</p>
			<div id="num42" align="center" style="width: 300px;height: 300px;background-color: red;">
				<p>DIV2的一个非DIV元素</p>
				<div id="num43" align="center" style="width: 200px;height: 200px;background-color: beige;">
					<p>DIV3的一个非DIV元素</p>
					<div id="num44" align="center" style="width: 100px;height: 100px;background-color: greenyellow;">
						<p>DIV4的一个非DIV元素</p>
					</div>
				</div>
			</div>
			<br>
			<button type="button" onclick="but1();">看什么看，点就完了</button>
		</div>
		
	</body>
	<script type="text/javascript">
		function but1(){
			var af=document.getElementById('num44');
			console.log('1级父元素为');console.log(af.parentElement);console.log('1级父节点为');console.log(af.parentNode);
			console.log('2级父元素为');console.log(af.parentElement.parentElement);
			console.log('2级父节点为');console.log(af.parentNode.parentNode);
			console.log('3级父元素为');console.log(af.parentElement.parentElement.parentElement);
			console.log('3级父节点为');console.log(af.parentNode.parentNode.parentNode);
		}
		/*4.制作4个嵌套DIV ，要求：
		      1.每个父DIV尺寸必须大于子DIV
		      2.实现每个DIV在父DIV正中间
		      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
		      4.通过最底层DIV，打印每层父DIV，如：
			1级父元素为（），1级父节点为（）
			2级父元素为（），2级父节点为（）*/
	</script>
</html>
